<template>
<view class="evaluation-item">
    <view class="evaluation-item-avatar">
        <image mode="scaleToFill" :src="data.avatar"></image>
    </view>
    <view class="evaluation-item-content">
        <view class="evaluation-item-name">{{ data.name }}</view>
        <view class="evaluation-item-info">{{  data.content }}</view>
    </view>
</view>
</template>

<script setup>
defineProps({
    data: {
        type: Object,
        default: () => []
    }
})
</script>

<style scoped lang="scss">

.evaluation-item {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;
    .evaluation-item-avatar {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .evaluation-item-content {
        .evaluation-item-name {
            font-size: 26rpx;
            color: #666666;
            line-height: 36rpx;
        }
        .evaluation-item-info {
            font-size: 26rpx;
            color: #333333;
            line-height: 36rpx;
            margin-top: 14rpx;
        }
    }
}

</style>
